#@front_layout()
	
#define css()
	
#end

#define main()
<div id="bg" class="container bg">
	<div class="hide">
		<img id="pandaImg" src="#(ctx)/resources/img/major.png" />
	</div>
	<canvas id="bgCanvas"></canvas>
</div>
<div class="center">
上下左右控制移动
</div>
#end

#define js()
<script>
	var pandaWidth = 45;
	var pandaHeight = 60;
	
	var direct = {
		left: 1,
		right: 3,
		top: 2,
		bottom: 0
	}

	// 当前点
	var pandaPoint = {
			center: {x: pandaWidth / 2, y: pandaHeight / 2},
			current: {x: 0, y: 0},
			lt: function() {     // 左上
				return {x: this.center.x - pandaWidth / 2, y: this.center.y - pandaHeight / 2};
			},
			rt: function() {   // 右上
				return {x: this.center.x + pandaWidth / 2, y: this.center.y - pandaHeight / 2};
			},
			lb: function() {   // 左下
				return {x: this.center.x - pandaWidth / 2, y: this.center.y + pandaHeight / 2};
			},
			rb: function() { // 右下
				return {x: this.center.x + pandaWidth / 2, y: this.center.y + pandaHeight / 2};
			}
		};

	var bgCanvas = document.getElementById("bgCanvas");
	var bgCanvasCtx = bgCanvas.getContext("2d");
	bgCanvas.width = $("#bg").width();
	bgCanvas.height = $("#bg").height();
	
	var pandaImg = document.getElementById("pandaImg");
	pandaImg.onload = function() {
		bgCanvasCtx.drawImage(pandaImg, 0, 0, pandaWidth, pandaHeight, 0, 0, pandaWidth, pandaHeight);
	}
	
	bgCanvas.oncontextmenu = function(ev){
		ev.preventDefault();
    }
	
	$(document).keydown(function(event){
		var key = event.which;
		if(key == "38"){  // 上
			pandaPoint.center.y = pandaPoint.center.y - pandaHeight;
			pandaPoint.current.x = (pandaPoint.current.x + 1) % 4;
			bgCanvasCtx.fillStyle = $("#bg").css("background-color");
			bgCanvasCtx.fillRect(pandaPoint.lt().x, pandaPoint.lt().y + pandaHeight, pandaWidth, pandaHeight);
			bgCanvasCtx.drawImage(pandaImg, pandaPoint.current.x * pandaWidth, pandaHeight * direct.top, pandaWidth, pandaHeight, pandaPoint.lt().x, pandaPoint.lt().y, pandaWidth, pandaHeight);
		} else if(key == "40"){  // 下
			pandaPoint.center.y = pandaPoint.center.y + pandaHeight;
			pandaPoint.current.x = (pandaPoint.current.x + 1) % 4;
			bgCanvasCtx.fillStyle = $("#bg").css("background-color");
			bgCanvasCtx.fillRect(pandaPoint.lt().x, pandaPoint.lt().y - pandaHeight, pandaWidth, pandaHeight);
			bgCanvasCtx.drawImage(pandaImg, pandaPoint.current.x * pandaWidth, pandaHeight * direct.bottom, pandaWidth, pandaHeight, pandaPoint.lt().x, pandaPoint.lt().y, pandaWidth, pandaHeight);
		} else if(key == "37"){  // 左
			pandaPoint.center.x = pandaPoint.center.x - pandaWidth;
			pandaPoint.current.x = (pandaPoint.current.x + 1) % 4;
			bgCanvasCtx.fillStyle = $("#bg").css("background-color");
			bgCanvasCtx.fillRect(pandaPoint.lt().x + pandaWidth, pandaPoint.lt().y, pandaWidth, pandaHeight);
			bgCanvasCtx.drawImage(pandaImg, pandaPoint.current.x * pandaWidth, pandaHeight * direct.left, pandaWidth, pandaHeight, pandaPoint.lt().x, pandaPoint.lt().y, pandaWidth, pandaHeight);
		} else if(key == "39"){  // 右
			pandaPoint.center.x = pandaPoint.center.x + pandaWidth;
			pandaPoint.current.x = (pandaPoint.current.x + 1) % 4;
			bgCanvasCtx.fillStyle = $("#bg").css("background-color");
			bgCanvasCtx.fillRect(pandaPoint.lt().x - pandaWidth, pandaPoint.lt().y, pandaWidth, pandaHeight);
			bgCanvasCtx.drawImage(pandaImg, pandaPoint.current.x * pandaWidth, pandaHeight * direct.right, pandaWidth, pandaHeight, pandaPoint.lt().x, pandaPoint.lt().y, pandaWidth, pandaHeight);
		}
	});
</script>
#end